<template>
    <u-popup
            :show="show"
            @close="closeHandler"
    >
        <view class="u-picker">
            <u-toolbar
                    v-if="showToolbar"
                    :cancelColor="cancelColor"
                    :confirmColor="confirmColor"
                    :cancelText="cancelText"
                    :confirmText="confirmText"
                    :title="title"
                    @cancel="cancel"
                    @confirm="confirm"
            ></u-toolbar>

            <view class="content">
                <text>房屋成交后,由房东支付的现金补贴比例</text>
                <u-gap height="1"></u-gap>
                <text style="color: #2979ff">填写范围 25-100 </text>

                <u-form labelPosition="left" labelWidth="120">
                    <u-form-item label="现金补贴比例" prop="building" borderBottom>
                        <u-input v-model="num" disabled>
                            <u--text text="%" slot="suffix" margin="0 3px 0 0" type="tips"></u--text>
                        </u-input>
                    </u-form-item>

                    <u-form-item>
                        <u-row>
                            <view class="u-page__tag-item" v-for="(item, index) in radios" :key="index">
                                <u-tag :text="item.text+'%'" :plain="!item.checked" type="primary" :name="index" @click="radioClick"></u-tag>
                            </view>
                        </u-row>
                    </u-form-item>
                </u-form>

                <view class="safe-area-inset-bottom"></view>
            </view>
        </view>
    </u-popup>
</template>

<script>
    export default {
        name: "subsidy-picker",
        props: {
            // 是否展示picker弹窗
            show: {
                type: Boolean,
                default: uni.$u.props.picker.show
            },
            // 是否展示顶部的操作栏
            showToolbar: {
                type: Boolean,
                default: uni.$u.props.picker.showToolbar
            },
            // 顶部标题
            title: {
                type: String,
                default: uni.$u.props.picker.title
            },
            // 取消按钮的文字
            cancelText: {
                type: String,
                default: uni.$u.props.picker.cancelText
            },
            // 确认按钮的文字
            confirmText: {
                type: String,
                default: uni.$u.props.picker.confirmText
            },
            // 取消按钮的颜色
            cancelColor: {
                type: String,
                default: uni.$u.props.picker.cancelColor
            },
            // 确认按钮的颜色
            confirmColor: {
                type: String,
                default: uni.$u.props.picker.confirmColor
            },
            // 是否允许点击遮罩关闭选择器
            closeOnClickOverlay: {
                type: Boolean,
                default: uni.$u.props.picker.closeOnClickOverlay
            },
            defaultNum:{
                type: String,
                default:''
            }
        },
        mounted(){
            this.num = this.defaultNum;
        },
        data(){
            return {
                num: '',
                radios: [
                    {
                        text:'23.33',
                        checked: false
                    }, {
                        text:'50',
                        checked: false
                    }, {
                        text:'73.33',
                        checked: false
                    }, {
                        text:'100',
                        checked: false
                    }],
            };
        },
        methods: {
            // 关闭选择器
            closeHandler() {
                if (this.closeOnClickOverlay) {
                    this.$emit('close')
                }
            },
            // 点击工具栏的取消按钮
            cancel() {
                this.$emit('cancel')
            },
            // 点击工具栏的确定按钮
            confirm() {
                this.$emit('confirm', this.num);
            },
            radioClick(name) {
                this.radios.map((item, index) => {
                    item.checked = index === name ? true : false
                });

                this.num = this.radios[name].text;
            },
        },
    }
</script>

<style scoped>
    .content{
        padding: 20rpx;
    }

    .u-page__tag-item {
        margin-right: 20px;
    }
</style>